<template>
  <a-drawer
    title="字段设置"
    width="400px"
    :visible="visible"
    :body-style="{ paddingBottom: '70px' }"
    @close="close"
  >
    <h4>可见字段</h4>
    <draggable v-model="list" tag="ul">
      <li v-for="(item, index) in list" :key="index" class="item cp">
        <span>{{ index + 1 }}. {{ item.title }}</span>
        <a @click="delItem(index)">删除</a>
      </li>
    </draggable>

    <a-divider />

    <h4>可添加字段</h4>
    <ul>
      <li v-for="(item, index) in planList" :key="item.key" class="item">
        <span>{{ item.title }}</span>
        <a @click="addItem(index)">添加</a>
      </li>
    </ul>
    <div
      :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '10px 16px',
        background: '#fff',
        textAlign: 'right',
        zIndex: 1
      }"
    >
      <a-button style="margin-right: 8px" @click="reset"> 重置 </a-button>
      <a-button type="primary" @click="submit"> 保存 </a-button>
    </div>
  </a-drawer>
</template>

<script>
import draggable from 'vuedraggable'
import { cloneDeep } from 'lodash'

export default {
  components: { draggable },

  props: {
    visible: {
      type: Boolean,
      default: false
    },
    columns: {
      type: Array,
      default: () => []
    },
    localName: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
      list: [],
      planList: []
    }
  },
  watch: {
    visible(newVal) {
      if (newVal) {
        this.initData()
      } else {
        this.list = []
        this.planList = []
      }
    }
  },
  methods: {
    initData() {
      const lang = localStorage.getItem('lang') === 'en-GB' ? 'en' : ''
      const data =
        JSON.parse(localStorage.getItem(`${this.localName}${lang}`)) || []

      if (data?.length > 0) {
        data.forEach(_ => {
          this.columns.forEach(item => {
            if (_ === item.title) {
              this.list.push(item)
            }
          })
        })
        this.columns.forEach(item => {
          if (!data.includes(item.title)) {
            this.planList.push(item)
          }
        })
      } else {
        this.list = cloneDeep(this.columns)
        this.planList = []
      }
    },

    addItem(index) {
      this.list.push(this.planList[index])
      this.planList.splice(index, 1)
    },

    delItem(index) {
      this.planList.push(this.list[index])
      this.list.splice(index, 1)
    },

    reset() {
      const lang = localStorage.getItem('lang') === 'en-GB' ? 'en' : ''
      localStorage.removeItem(`${this.localName}${lang}`)

      this.close()
      this.$emit('reload')
    },
    submit() {
      const lang = localStorage.getItem('lang') === 'en-GB' ? 'en' : ''
      const localData = this.list.map(item => item.title)
      console.log(`${this.localName}${lang}`)
      localStorage.setItem(
        `${this.localName}${lang}`,
        JSON.stringify(localData)
      )

      this.close()
      this.$emit('reload')
    },
    close() {
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style lang="less" scoped>
.item {
  margin: 8px 0;
  span {
    color: rgba(0, 0, 0, 0.6);
  }
  a {
    margin-left: 15px;
  }
}
.cp {
  cursor: pointer;
}
</style>
